<template>
  <view style="width: 100vw;height: 100vh" :style="{'background':(ktheme == 'black' ? '#000000' : 'linear-gradient(0deg, #FFFDAF, #D0B2F1, #CCA2FC)')}">
    <hx-navbar title="折线流转图" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
               transparent="auto"></hx-navbar>
    <!--  正常版本  -->
    <view class="container" v-show="pageChange">
      <view class="title">{{name}}</view>
      <l-echart ref="chartRef"></l-echart>
      <view class="screen_change">
        <image v-if="ktheme == 'black'" src="@/static/free/open.png" @click="open"></image>
        <image v-else src="@/static/free/open_purple.png" @click="open"></image>
      </view>
      <view class="tab_container" v-if="ktheme == 'black'">
        <view
            v-for="(item, index) in timeList"
            class="tab_item"
            :class="{'tab_item_active': index === activeIndex}"
            @click="getHourData(item.value, index)"
        >{{ item.name }}</view>
      </view>
      <view class="tab_container" v-else>
        <view
            v-for="(item, index) in timeList"
            class="tab_item"
            :class="{'tab_item_active_purple': index === activeIndex}"
            @click="getHourData(item.value, index)"
        >{{ item.name }}</view>
      </view>

    </view>
    <!--  横屏版本  -->
    <view class="container_change" v-show="!pageChange">
      <l-echart ref="chartRef_change" style="width: 75vw; height: 95vh; margin: 0 auto;"></l-echart>
      <view class="title_change">{{name}}</view>
      <view class="position_container">
        <view class="tab_container" v-if="ktheme == 'black'">
          <view
              v-for="(item, index) in timeList"
              :style="{'color':(ktheme == 'black' ? '#ffffff':'#000000')}"
              class="tab_item"
              :class="{'tab_item_active': index === activeIndex}"
              @click="getHourData(item.value, index)"
          >{{ item.name }}</view>
        </view>
        <view class="tab_container" v-else>
          <view
              v-for="(item, index) in timeList"
              class="tab_item"
              :class="{'tab_item_active_purple': index === activeIndex}"
              @click="getHourData(item.value, index)"
          >{{ item.name }}</view>
        </view>
        <view class="screen_change_change">
          <image v-if="ktheme == 'black'" src="@/static/free/close.png" @click="close"></image>
          <image v-else src="@/static/free/close_purple.png" @click="close"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
let fifteenData = []
let fifteenData_change = []
export default {
  data() {
    return {
      activeIndex: 0,
      timeList: [
        {name: '5分钟', value: 5},
        {name: '15分钟', value: 15},
        {name: '4小时', value: 240}
      ],
      pageChange: true,
      hourData: {},
      fourHourData: {},
      dayData: {},
      name: '',
      iid: ''
    }
  },
  onLoad(options) {
    this.name = options.name
    this.iid = options.iid
  },
  mounted() {
    this.getHourData(5)
  },
  methods: {
    open() {
      this.pageChange = false
      this.getHourData(5)
    },
    close() {
      this.pageChange = true
      this.getHourData(5)
    },
    init() {
      this.$refs[`${this.pageChange ? 'chartRef' : 'chartRef_change'}`].init(echarts, chart => {
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              params = params[0]
              let date = new Date(params.value[0])
              let hour = date.getHours()
              let minutes = date.getMinutes()
              if (hour < 10) {
                hour = '0' + hour;
              }
              if (minutes < 10) {
                minutes = '0' + minutes;
              }
              let dateStr = '北京时间：' + hour + '点' + minutes + '分';
              if (params.value[1]) {
                return dateStr + ' ' + params.value[1] + '元';
              } else {
                return dateStr
              }
            }
          },
          xAxis: {
            name: '时间',
            type: 'time',
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                color: this.ktheme == 'black' ? '#bebebe' : '#ffffff'
              }
            },
            axisLabel: {
              formatter: function (value) {
                let date = new Date(value);
                let hour = date.getHours();
                let minutes = date.getMinutes();
                if (hour < 10) {
                  hour = '0' + hour;
                }
                if (minutes < 10) {
                  minutes = '0' + minutes;
                }
                return hour + ':' + minutes;
              },
              color: this.ktheme == 'black' ? '#bebebe' : '#ffffff'
            }
          },
          yAxis: {
            name: '价格',
            type: 'value',
            splitLine: {
              show: false
            },
            boundaryGap: [0, '80%'],
            axisLine: {
              lineStyle: {
                color: this.ktheme == 'black' ? '#bebebe' : '#ffffff'
              }
            },
            axisLabel: {
              color: this.ktheme == 'black' ? '#bebebe' : '#ffffff'
            }
          },
          grid: {
            left: 65,
            right: 65,
          },
          series: [{
            type: 'line',
            hoverAnimation: false,
            smooth: true,
            itemStyle: {
              normal: {
                color: this.ktheme == 'black' ? "rgb(89, 114, 200)" : '#ffffff',
                lineStyle: {
                  color: this.ktheme == 'black' ? "rgb(89, 114, 200)" : '#ffffff',
                }
              }
            },
            data: fifteenData
          }]
        }
        const option_change = {
          tooltip: {
            trigger: 'axis',
            extraCssText:'transform: rotate(90deg)',
            formatter: function (params) {
              params = params[0]
              let date = new Date(params.value[1])
              let hour = date.getHours()
              let minutes = date.getMinutes()
              if (hour < 10) {
                hour = '0' + hour;
              }
              if (minutes < 10) {
                minutes = '0' + minutes;
              }
              let dateStr = '北京时间：' + hour + '点' + minutes + '分';
              if (params.value[0]) {
                return dateStr + ' ' + params.value[0] + '元';
              } else {
                return dateStr
              }
            }
          },
          xAxis: {
            position: 'top',
            nameRotate: -90,
            name: '价格',
            type: 'value',
            splitLine: {
              show: false
            },
            boundaryGap: [0, '80%'],
            axisLine: {
              lineStyle: {
                color: this.ktheme == 'black' ? '#bebebe' : '#ffffff'
              }
            },
            axisLabel: {
              color: this.ktheme == 'black' ? '#bebebe' : '#ffffff',
              rotate: 90,
            }
          },
          yAxis: {
            inverse: true,
            name: '时间',
            type: 'time',
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                color: this.ktheme == 'black' ? '#bebebe' : '#ffffff'
              }
            },
            axisLabel: {
              rotate: -90,
              color: this.ktheme == 'black' ? '#bebebe' : '#ffffff'
            }
          },
          grid: {
            left: 65,
            right: 65,
          },
          series: [{
            type: 'line',
            hoverAnimation: false,
            smooth: true,
            itemStyle: {
              normal: {
                color: this.ktheme == 'black' ? "rgb(89, 114, 200)" : '#ffffff',
                lineStyle: {
                  color: this.ktheme == 'black' ? "rgb(89, 114, 200)" : '#ffffff',
                }
              }
            },
            data: fifteenData_change
          }]
        }

        chart.setOption(this.pageChange ? option : option_change);
      })
    },
    getHourData(minute, index) {
      if (index) {
        this.activeIndex = index
      } else {
        this.activeIndex = 0
      }
      let data = {
        iid: this.iid,
        minute: minute,
      };
      this.$api.echarts_offer(data, res => {
        let before_data = res.data
        before_data.forEach((item) => {
          if (item.value.length > 0) {
            item.value[1] = Number(item.value[1]/100).toFixed(2)
            if (item.name) {
              item.name = Number(item.name);
            }
            if (item.value.length > 0) {
              item.value[0] = Number(item.value[0]);
            }
          }
        })
        fifteenData = before_data
        fifteenData_change = JSON.parse(JSON.stringify(before_data))
        fifteenData_change.forEach(item => {
          if (item.value.length > 0) {
            item.value[1] = item.value.splice(0,1,item.value[1])[0];
          }
        })
        this.init()
      })
    }
  }
};

</script>

<style lang="scss">
.container {
  width: 100%;
  margin: 50rpx auto 0 auto;
  .title {
    text-align: center;
    line-height: 23rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
  }
  .screen_change {
    display: flex;
    justify-content: flex-end;
    padding-right: 30rpx;
    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
}
.tab_container {
  width: 380rpx;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  border: 1px solid rgba(224, 243, 127, 1);
  border-radius: 28rpx;
  height: 55rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  line-height: 55rpx;
  align-items: center;
  .tab_item {
    width: 123rpx;
    height: 45rpx;
    line-height: 45rpx;
    border-radius: 22rpx;
    text-align: center;
  }
  .tab_item_active {
    background: linear-gradient(180deg, #E0F37F, #68D17C);
  }
  .tab_item_active_purple {
    background: linear-gradient(180deg, rgba(147, 118, 255, 1), rgba(174, 44, 241, 1));
  }
}

.container_change {
  //top: 0;
  //position: relative;
  width: 100vw !important;
  margin: 0 auto;
  height: 70vh !important;
  .title_change {
    top: 42%;
    right: -140rpx;
    position: absolute;
    transform-origin:top left;
    transform: rotate(90deg) translateY(-100%);
    text-align: center;
    line-height: 23rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
  }
  .screen_change_change {
    padding-right: 30rpx;
    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
  .position_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    top: 30%;
    left: 40rpx;
    position: absolute;
    transform-origin:top left;
    transform: rotate(90deg) translateY(-100%);
  }
}
</style>
